<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        // 闭包 函数作为返回值
        // function fn() {
        //     var max = 10
        //     return function bar(x) {
        //         if (x > max) {
        //             console.log(x);
        //         }
        //     }
        // }
        // var f1 = fn()
        // f1(15)
        // bar函数作为返回值， 赋值给f1变量。 执行f1(15) 时，
        //  用到了fn作用域下的max变量的值。 至于如何跨作用域取值

        // 闭包使用
        var closure = document.querySelectorAll("li")
        for (var i = 0; i < closure.length; i++) {
            closure[i].index = i
            closure[i].onclick = function () {
                alert(this.index)
            }
        }
    </script>
</body>

</html>